<template>
    <div>
        <div class="t4_r_top t4_border" style="height: auto">
            <div class="t4_r_sjCons">
                <!-- 目录列表 -->
                <div class="t4_sjCons" style="display: block">
                    <div class="t2_sjCons_list t2_result_list_r2">
                        <h2 class="titBox">
                            <a><img src="@/assets/images/share.png" style="padding: 0 8px; height: 24px" />{{
                                zyflInfoInfo.name }}</a>
                            <!--                            <div class="sqBtn">-->
                            <!--                                <el-button plain size="small" @click="approvalBtnClick(dataInfo)">申&nbsp;请</el-button>-->
                            <!--                            </div>-->
                        </h2>
                        <div class="zyInfoBox">
                            <div class="zyInfo">
                                <div>资源分类：{{ zyflInfoInfo.meunName }}</div>
                                <div class="infoItem_box">
                                    <div class="infoItem">
                                        <div>资源提供方：{{ zyflInfoInfo.xxzytgf }}</div>
                                        <div>
                                            共享类型：{{ zyflInfoInfo.gxtype }}
                                        </div>
                                    </div>
                                    <div class="infoItem">
                                        <div>创建时间：{{ zyflInfoInfo.createTime }}</div>
                                        <div>
                                            共享条件：{{
                                                zyflInfoInfo.gxtj ? zyflInfoInfo.gxtj : '无'
                                            }}
                                        </div>
                                    </div>
                                    <div class="infoItem">
                                        <!-- <div>更新日期：{{ dataInfo.createTime }}</div> -->
                                        <div>
                                            更新周期：{{
                                                zyflInfoInfo.frequency
                                            }}
                                        </div>
                                      <div>
                                        共享方式：
                                        {{ zyflInfoInfo.gxfs }}
                                      </div>
                                        <!--                            <div>共享方式：<span class="gxfs" v-html="initInfo(item.shareMethod,'ShareMode')"></span></div>-->
                                    </div>
                                    <div class="infoItem">
                                        <div> 资源类型： 数据资源</div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 目录列表 end -->
            </div>
        </div>
        <div class="tabsBox">
            <el-tabs v-model="actName" @tab-click="handleClick">
                <el-tab-pane label="信息项信息" name="xxx">
                    <el-table :data="xxxmc" border style="width: 100%">
                        <el-table-column prop="code" label="信息项名称">
                        </el-table-column>
                        <el-table-column prop="description" label="信息项表注释">
                        </el-table-column>
                        <el-table-column prop="dataType" label="信息项数据类型">
                        </el-table-column>
                    </el-table>
                    <el-dialog :showClose="false" title="信息项信息" append-to-body :visible.sync="dialogTableVisiblea">
                        <el-table :data="xxxData" border style="width: 100%">
                            <el-table-column prop="name" label="信息项名称" width="180">
                            </el-table-column>
                            <el-table-column prop="type" label="数据类型">
                            </el-table-column>
                            <el-table-column prop="length" label="数据长度">
                            </el-table-column>
                            <el-table-column prop="description" label="信息项描述">
                            </el-table-column>
                        </el-table>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="表数据预览" name="bsj" v-if="bxxFlag">
                    <el-table :data="xxxmcs" border style="width: 100%" :empty-text="tableInfo">
                        <el-table-column prop="name" label="表名称">
                        </el-table-column>
                        <el-table-column prop="comment" label="表注释">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="infoHandles(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog title="信息项信息" width="80%" append-to-body :visible.sync="dialogTableVisibleaa">

                        <el-table :data="xxxDatas.samples" border>
                            <el-table-column v-for="(item, index) in xxxDatas.columnResponseList"
                                :prop="index.toString()" :key="index" :label="item.comment" min-width="120">
                            </el-table-column>
                        </el-table>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="API服务" name="api" v-if="hasApiName">
                  <div v-if="!apiData ">
                    {{data}}
                  </div>
                    <el-tabs tab-position="left" v-if="apiData">
                        <el-tab-pane label="zyflInfoInf">
                            <!-- <el-tab-pane :label="zyflInfoInfo.apiName"> -->
                            <div class="apiTop">
                                <div>
                                    接口地址：{{ apiData }}
                                </div>
                                <div>
                                    调用方式：{{ dyfs }}
                                </div>
                                <!-- <div>
                                    请求示例：{{ apiData.requestUrl }}
                                </div> -->
                                <div>
                                    TOKEN：
                                    <el-popover placement="bottom" title="TOKEN：" width="800" trigger="click"
                                        :content="token" style="position: relative;">
                                        <el-button slot="reference" type="text"
                                            style="position: absolute;right: -52px;top: -9px;">点击查看</el-button>
                                    </el-popover>
                                </div>
                            </div>
                            <div class="qqcs">
                                <div class="title"
                                    style="background: #ced4da;margin: 10px 0;padding-left: 5px;height: 33px;line-height: 33px;">
                                    请求参数
                                </div>
                                <div class="csTable">
                                    <el-table :data="data.requestParams" border style="width: 100%">
                                        <el-table-column prop="code" label="英文"></el-table-column>
                                        <el-table-column prop="dataType" label="类型"></el-table-column>
                                        <el-table-column prop="required" label="是否必填"></el-table-column>
                                        <el-table-column prop="location" label="参数位置"></el-table-column>
                                        <el-table-column prop="defaultValue" label="默认值"></el-table-column>
                                        <el-table-column prop="description" label="说明"></el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div class="sccs">
                                <div class="title"
                                    style="background: #ced4da;margin: 10px 0;padding-left: 5px;height: 33px;line-height: 33px;">
                                    输出参数
                                </div>
                                <div class="csTable">
                                    <el-table :data="data.responseParams" border style="width: 100%">
                                        <el-table-column prop="code" label="英文"></el-table-column>
                                        <el-table-column prop="dataType" label="类型"></el-table-column>
                                        <el-table-column prop="location" label="参数位置"></el-table-column>
                                        <el-table-column prop="description" label="说明"></el-table-column>

                                    </el-table>
                                </div>
                            </div>

                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="文件" name="file" v-if="fileFlag">
                    <el-tabs tab-position="left">
                        <div class="qqcs">
                            <div class="csTable">
                                <el-table :data="fileList"  border style="width: 100%">
                                    <el-table-column prop="name" label="文件名"></el-table-column>
                                    <el-table-column fixed="right" label="操作" width="100">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small"
                                                @click="downloadFile(scope.row)">下载</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>



                    </el-tabs>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 申请对话框 -->
        <!--    <el-dialog-->
        <!--      title="资源申请"-->
        <!--      :visible.sync="approvalDialog.show"-->
        <!--      top="40px"-->
        <!--      width="1100px"-->
        <!--      append-to-body-->
        <!--    >-->
        <!--      <approval-->
        <!--        v-if="approvalDialog.show"-->
        <!--        :dataList="dataListIngo"-->
        <!--        :infoItemData="infoItemData"-->
        <!--        :showDialog="approvalDialog"-->
        <!--        @closeDialog="handleCloseDialog"-->
        <!--      ></approval>-->
        <!--    </el-dialog>-->
        <!-- 调试对话框 -->
        <!--    <el-dialog-->
        <!--      title="调试"-->
        <!--      :visible.sync="dialogVisibleTs"-->
        <!--      width="50%"-->
        <!--      :close-on-click-modal="false"-->
        <!--      @close="handleDialogClose"-->
        <!--    >-->
        <!--      <el-form label-width="80px">-->
        <!--        <el-form-item label="调用方式:">-->
        <!--          <el-radio v-model="radioPost" label="1">{{-->
        <!--            infoItemDataApi.requestMethod-->
        <!--          }}</el-radio>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="输入参数:">-->
        <!--          <el-checkbox-group v-model="checkList">-->
        <!--            <div-->
        <!--              v-for="(item, index) in infoItemTableIn"-->
        <!--              :key="index"-->
        <!--              style="-->
        <!--                display: flex;-->
        <!--                justify-content: space-between;-->
        <!--                margin-right: 100px;-->
        <!--                margin-top: 10px;-->
        <!--              "-->
        <!--            >-->
        <!--              <el-checkbox :label="item.fieldName">{{-->
        <!--                item.fieldName-->
        <!--              }}</el-checkbox>-->
        <!--              <el-input-->
        <!--                style="width: 300px"-->
        <!--                v-model="inputValues[item.fieldName]"-->
        <!--                @input="handleInputChange(item.fieldName)"-->
        <!--              ></el-input>-->
        <!--            </div>-->
        <!--          </el-checkbox-group>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item>-->
        <!--          <button @click.prevent="btnZx" class="zxBtn">执行</button>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item>-->
        <!--          <pre class="zxBox">{{ records }}</pre>-->
        <!--        </el-form-item>-->
        <!--      </el-form>-->
        <!--      <span slot="footer" class="dialog-footer">-->
        <!--        <el-button @click="dialogVisibleTsQx">取 消</el-button>-->
        <!--      </span>-->
        <!--    </el-dialog>-->
        <!-- API申请弹窗 -->
        <!-- 申请弹窗 -->
        <!--    <el-dialog-->
        <!--      title="申请资源"-->
        <!--      :visible.sync="dialogVisibleApi"-->
        <!--      width="1100px"-->
        <!--      append-to-body-->
        <!--    >-->
        <!--      <el-form-->
        <!--        :rules="rules"-->
        <!--        ref="ruleForm"-->
        <!--        label-width="100px"-->
        <!--        class="demo-ruleForm"-->
        <!--        :model="ruleForm"-->
        <!--      >-->
        <!--        <el-form-item label="申请描述:" prop="textarea">-->
        <!--          <el-input-->
        <!--            type="textarea"-->
        <!--            :rows="7"-->
        <!--            placeholder="请输入内容"-->
        <!--            v-model="ruleForm.textarea"-->
        <!--            style="width: 100%"-->
        <!--          >-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
        <!--      </el-form>-->
        <!--      <div class="dialog-bottom">-->
        <!--        <el-button type="primary" @click="submitBtn('ruleForm')"-->
        <!--          >确认申请</el-button-->
        <!--        >-->
        <!--        <el-button size="small" @click="dialogVisibleApi = false"-->
        <!--          >取消</el-button-->
        <!--        >-->
        <!--      </div>-->
        <!--      <br />-->
        <!--    </el-dialog>-->
    </div>
</template>

<script>
// import Cookies from "js-cookie";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism.css";

import approval from "./approval";
import Cookies from "js-cookie";
import {
    getResInfo,
    getUpdateCycle,
    getUserLogin,
    getApiInfo,
    getDataPreview,
    getMyDataInfo,
    getApply,
    getJkcsjkApi, getFieldList,
    getbsjxList, getApiList, getQueryparameterList, getConsumer,
    getdataSjbm, getrouter, getqueryparameter, getdetail,
    getMyAppKey
} from "../../utils/httpUtils";
import sqlImg from "@/assets/images/sql.png";
import apiImg from "@/assets/images/APIserve.png";
import fileImg from "@/assets/images/file.png";

export default {
    components: {
        approval,
        PrismEditor,
    },
    name: "dataInfo",
    props: [
        "updateCycleList",
        "shareTypeList",
        "ShareModeList",
        "resTpye",
        "resourceCode",

    ],
    data() {
        return {
            tableInfo: '',
            tokens: JSON.parse(Cookies.get("token")),
            fileList: [],
            apiNameList: [],
            fileFlag: false,
            dyfs:'',
            data: {
                title: '企业注销查询接口',
                zyfl: '数据资源根目录/市直部门/市场监督管理局',
                zytgf: '市场监督管理局',
                gxlx: '有条件共享',
                createTime: '2024-02-21 09:38:11',
                gxtj: '需向大数据办申请',
                updateTime: '2024-05-06 17:28:55',
                gxzq: '每周',
                zylx: '数据资源',
                gxfs: 'API服务',
                url: '',
                dyfs: '',
                fhgs: '',
                qqsl: '',
                qqcsData: [{
                    en: 'sfzhn',
                    cn: '',
                    lx: 'string',
                    sfbt: '是',
                    cswz: 'Query',
                    slz: '',
                    sm: ''
                }],
                sccsData: [{
                    en: 'djjg',
                    cn: '登记机构',
                    lx: 'string',
                    sm: ''
                }]
            },
            token: '',
            apiData: '',
            xxxmcs: [],
            tableDatass: {
                keys: [],
                values: []
            },
            tableDatasss: {
                keys: [],
                values: []
            },
            xxxData: [],
            xxxDatas: [],
            dialogTableVisiblea: false,
            dialogTableVisibleaa: false,
            xxxmc: [],
            actName: 'xxx',
            id: "",
            hpptdz: "",
            version: "",
            apiId: "",
            inputValues: {},
            records: null,
            radioPost: "1",
            checkList: [],
            ruleForm: {
                textarea: "",
            },
            rules: {
                textarea: [
                    { required: true, message: "请输入申请描述", trigger: "blur" },
                ],
            },
            dialogVisibleApi: false,
            dialogVisibleTs: false,
            infoList: [],
            approvalDialog: {
                show: false,
            },
            head: [],
            dataList: [],
            dataListIngo: [],
            activeInfo: "info",
            activeNames: ["1"],
            dataInfo: {},
            code: "",
            name: "",
            accessKey: "",
            infoItemData: [],
            zyflInfoInfo: {},
            infoItemDataApi: [],
            infoItemTableIn: [],
            infoItemTableOut: [],
            hasLogin: Cookies.get("userInfo"),
            resTypeList: [
                {
                    code: 0,
                    name: "数据资源",
                },
                {
                    code: 1,
                    name: "服务资源",
                },
            ],
        };
    },
    watch: {
        // infoItemData: {
        //   handler(newValue) {
        //     console.log(newValue,"newValue123")
        //     // this.code = newValue;
        //     // this.getMyDataInfofn();
        //   },
        //   immediate: true,
        //   deep: true,
        // },
    },
  beforeDestroy() {
    this.$bus.$off("dataInfo", this.handleDataInfo);
    this.$bus.$off("initxxx", this.initxxx);
  },
    mounted() {
      this.$bus.$on("dataInfo", this.handleDataInfo);
      this.$bus.$on("initxxx", this.initxxx);
        // this.$bus.$on("dataInfo", (data) => {
        //     console.log(data, "data");
        //     this.zyflInfoInfo = data
        //     this.$nextTick(() => {
        //         this.handleInit(data);
        //     });
        // });
        // this.$bus.$on("initxxx", () => {
        //     this.initxxx();
        // });
        // this.$bus.$on("id", (data) => {
        //     this.id = data
        //     this.$nextTick(() => {
        //         this.getDetails();
        //     });
        // });
        // this.$nextTick(() => {
        //     this.getDataInfo(data);
        // });
    },
    computed: {
        hasApiName() {
            return this.apiNameList.apiName && this.apiNameList.apiName.trim() !== ''
        },
        bxxFlag() {
            return Array.isArray(this.apiNameList.tableList) && this.apiNameList.tableList.length > 0;
        }
    },
    // computed: {
    //   requestExample() {
    //     return `${this.infoItemDataApi.requestPath}?${this.infoItemTableIn
    //       .map((item, index) => (index ? "&" : "") + item.fieldName + "=")
    //       .join("")}&access_token=您申请的APPKEY`;
    //   },
    //   shouldShowDebugButton() {
    //     return this.infoItemDataApi.auth === 1;
    //   },
    //   shouldShowApplyButton() {
    //     return (
    //       this.infoItemDataApi.auth === 0 && this.infoItemDataApi.apply === 0
    //     );
    //   },
    // },
    // destroyed() {
    //     this.$bus.$off("busInfo");
    // },
    methods: {
      handleDataInfo(data) {
        console.log(data, "data");
        this.zyflInfoInfo = data;
        this.$nextTick(() => {
          this.handleInit(data);
        });
      },
        initxxx(){
            this.actName = 'xxx'
            console.log(this.actName, 'actName');
        },
        downloadFile(row) {
            // 下载文件
            this.$axios({
                url: xhDomain + `/api/zwmh/downloadFile/${row.id}`,
                method: 'post',
                responseType: 'blob', // 确保响应是二进制数据
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
              console.log(res, 'res')
              const blob = new Blob([res.data], { type: 'application/octet-stream' });
              const url = window.URL.createObjectURL(blob);
              const a = document.createElement('a');
              a.href = url;
              a.download = row.name; // 设置下载文件的文件名，可以根据需要修改
              document.body.appendChild(a);
              a.click();
              setTimeout(() => {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
              }, 100);
            }).catch((err) => {
              console.log(err,"err")
              // responseType: 'blob' 这个类型获取报错提示
              if (err.response.data.type === 'application/json') {
                const fileReader = new FileReader();
                fileReader.readAsText(err.response.data, 'utf-8');
                fileReader.onload = function () {
                  const result = JSON.parse(fileReader.result);
                  console.log(result, 'result');
                  this.$message.error(result.message);
                }.bind(this); // Bind `this` to the onload function
                return;
              }

              const content = err.data
              const blob = new Blob([content], {
                type: "application/octet-stream"
              }) //构造一个blob对象来处理数据
                // this.$message.error(err.response.message)
            })
        },
        infoHandles(row) {
            console.log(row, 'row');
            console.log(this.tableDatasss, 'tableData');
            this.tableDatasss.values.forEach(item => {
                if (row.tid == item.tid) {
                    this.xxxDatas = item
                }
            })

            console.log(this.xxxDatas, 'xxxDatas');
            this.xxxDatas.samples = this.xxxDatas.samples.map(item =>
                item.map(item2 => {
                    if (typeof item2 === 'object') {
                        console.log(item2);
                        return ''; // 返回新的值替换原来的对象
                    }
                    return item2; // 保持非对象元素不变
                })
            );
            console.log(this.xxxDatas, 'xxxDatas');
            this.dialogTableVisibleaa = true;
        },
        handleClick(val) {
            console.log(this.zyflInfoInfo, 'dddddddddddddddddddddddddddddd');

                let params = {
                    uuid: this.zyflInfoInfo.apiId,
                    onlineVersion: this.zyflInfoInfo.version,
                    bmId: this.zyflInfoInfo.id
                }
                this.$axios({
                    url: xhDomain + `/api/zwmh/queryparameter`,
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json',
                        "Authorization": this.tokens
                    },
                    data: params
                }).then((res) => {
                    console.log(res, 'resAPI的接口123');
                    this.data = res.data
                    this.apiData = res.data.path
                    this.dyfs = res.data.type
                })

                getMyAppKey().then((res) => {
                  console.log(res,'--=')
                  this.token =  res.appKey
                });





        },
        handleInit(row) {
            this.xxxmcs = []
            this.tableInfo = '加载中...'
            console.log(row, '详情')
            this.$axios({
                url: xhDomain + `/api/zwmh/detail/${row.id}`,
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "----=---0000");
                if (res.data.map) {
                    console.log(res.data.map, "res.data.data.map");
                    this.xxxmc = Object.values(res.data.map).flat().filter(item => item.choose === 1);

                }
                if (res.data.api_fieldlist) {
                    this.xxxmc = res.data.api_fieldlist
                }
                if (res.data.file_fieldlist) {
                    this.xxxmc = res.data.file_fieldlist
                }
                if (res.data.data.gxfs.includes('文件')) {
                    this.fileFlag = true
                    this.getfileData(res.data.data.id)
                }else {
                  this.fileFlag = false
                }
                this.apiNameList = res.data.data
                console.log(this.apiNameList, " this.apiNameList");

            })
            this.$axios({
                url: xhDomain + `/api/zwmh/data?id=${row.id}`,
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, 'handleInit');

                if (res.data.body) {
                    const map = res.data.body.map;
                    const keys = [];
                    const values = [];

                    for (let key in map) {
                        if (map.hasOwnProperty(key)) {
                            keys.push(key);
                            values.push(map[key]);
                        }
                    }
                    const parsedArray = keys.map(this.parseSjbmTableString);
                    this.tableDatasss = {
                        keys: parsedArray,
                        values: values
                    }
                    console.log(this.tableDatasss, 'tableDatasss');
                    this.xxxmcs = this.tableDatasss.keys
                    this.tableInfo = '暂无数据'
                } else {
                    this.tableInfo = res.data
                }
                console.log(this.tableInfo, 'tableInfo');
            })
        },
        parseSjbmTableString(input) {
            const regex = /(\w+)=([^,)\s]+)/g;
            let match;
            const result = {};

            while ((match = regex.exec(input)) !== null) {
                const key = match[1];
                const value = match[2];
                result[key] = value;
            }
            return result;
        },
        getfileData(id) {
            this.$axios({
                url: xhDomain + `/api/dataSjbm/filedetail?bmid=${id}`,
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                this.fileList = res.data
            })
        },
        getDetails() {
            getdataSjbm({ id: this.id }).then(res => {
                console.log(res, "xq")
                this.dataInfo = res.data;
            })
        },
        // highlighter(code) {
        //   return highlight(this.infoItemDataApi.resultExampleData, languages.js);
        // },

        // api服务中的确认申请
        // submitBtn(formName) {
        //   this.$refs[formName].validate((valid) => {
        //     if (valid) {
        //       let formattedArr = [
        //         {
        //           resourceCode: this.dataInfo.code,
        //           apiCode: this.dataInfo.apis[0].code,
        //           description: this.ruleForm.textarea,
        //           type: "2",
        //         },
        //       ];
        //       let applysStr = JSON.stringify(formattedArr);
        //       getApply({
        //         applysStr: applysStr,
        //       }).then((res) => {
        //         if (res.code == "000000") {
        //           this.$message({
        //             message: "您的申请已提交成功，待审核",
        //             type: "success",
        //           });
        //           this.dialogVisibleApi = false;
        //           this.ruleForm.textarea = "";
        //           getApiInfo({
        //             apiCode: this.dataInfo.apis[0].code,
        //             resourceCode: this.dataInfo.code,
        //           }).then((ress) => {
        //             this.infoItemDataApi = JSON.parse(ress.data);
        //             this.infoItemTableIn = JSON.parse(
        //               this.infoItemDataApi.inputParameter
        //             );
        //             this.infoItemTableOut = JSON.parse(
        //               this.infoItemDataApi.outputParameter
        //             );
        //           });
        //           getDataPreview({
        //             id: this.dataInfo.apiCode,
        //             resourceCode: this.dataInfo.code,
        //             publish: 1,
        //           }).then((resss) => {
        //             this.head = resss.data.head;
        //             this.dataList = resss.data.data;
        //           });
        //         }
        //       });
        //     }
        //   });
        // },
        // handleDialogClose() {
        //   this.checkList = [];
        //   this.inputValues = {};
        //   this.records = null;
        // },
        // applyApiBtn() {
        //   this.dialogVisibleApi = true;
        // },
        // btnZx() {
        //   if (this.checkList.length == 0) {
        //     this.$message.error("请勾选输入参数");
        //   } else {
        //     const selectedValues = this.checkList.reduce((acc, fieldName) => {
        //       if (this.inputValues[fieldName] !== undefined) {
        //         acc[fieldName] = this.inputValues[fieldName];
        //       }
        //       return acc;
        //     }, {});
        //     const fullUrl = this.infoItemDataApi.requestPath;
        //     const regex = /\/api\/zyfwpt(.*)/;
        //
        //     const match = fullUrl.match(regex);
        //
        //     if (match && match.length > 1) {
        //       const partialUrl = match[1]; // 匹配到的第一个分组，即/api-external/后面的部分
        //
        //       getJkcsjkApi(
        //         partialUrl,
        //         {
        //           access_token: this.accessKey,
        //           ...selectedValues, // 使用扩展运算符直接展开selectedValues对象
        //         },
        //         60000
        //       )
        //         .then((res) => {
        //           this.records = res;
        //         })
        //         .catch((err) => {
        //           this.$message.error("参数错误");
        //         });
        //     }
        //   }
        // },
        // tsBtn() {
        //   this.dialogVisibleTs = true;
        //   this.getAccessKey();
        // },
        // dialogVisibleTsQx() {
        //   this.dialogVisibleTs = false;
        //   this.checkList = [];
        //   this.inputValues = {};
        //   this.records = null;
        // },
        // getMyDataInfofn() {
        //   getFieldList({ id: this.code }).then((res) => {
        //     console.log(res,"表信息项列表")
        //     this.infoItemData = res.data;
        //   }).catch((err) =>{
        //     this.infoItemData = []
        //   });
        //   getbsjxList({id: this.code }).then(res=>{
        //     this.head = res.columnResponseList
        //     this.dataList = res.samples;
        //   }).catch(err=>{
        //     this.head = []
        //     this.dataList = []
        //   })
        //   getApiList({apiUuid:this.apiId}).then(res=>{
        //     console.log(res,"api列表")
        //     this.infoItemDataApi = res || []
        //     this.hpptdz = res.protocolType+'//'+res.host+res.path
        //
        //
        //   }).catch(err=>{
        //     this.infoItemDataApi = []
        //   })
        //   getQueryparameterList({uuid:this.apiId,onlineVersion:this.version}).then(res=>{
        //   console.log(res,"参数列表")
        //     this.infoItemTableIn = res.requestParams
        //     this.infoItemTableOut = res.responseParams
        //   }).catch(err=>{
        //     this.infoItemTableIn = []
        //     this.infoItemTableOut = []
        //   })
        // },
        // approvalBtnClick(item) {
        //   // this.infoItemDataList = [item];
        //   let finIndex = this.infoList.find((i) => i.apiCode == item.apiCode);
        //   if (finIndex) {
        //     finIndex.isAct = true;
        //     finIndex.detailData = this.infoItemData;
        //     this.dataListIngo = [finIndex];
        //     this.approvalDialog = {
        //       show: true,
        //     };
        //   }
        // },
        getAccessKey() {
            if (this.accessKey) return;
            getConsumer().then((res) => {
                this.accessKey = res.data.token;
            });
        },
        // getTypeList() {
        //   //获取更新频率字段
        //   getUpdateCycle("updateCycle").then((res) => {
        //     if (res) {
        //       this.updateCycleList = res.data;
        //     }
        //   });
        //   // 获取共享类型字段
        //   getUpdateCycle("shareType").then((res) => {
        //     if (res) {
        //       this.shareTypeList = res.data;
        //     }
        //   });
        //   // 获取共享方式字段
        //   getUpdateCycle("ShareMode").then((res) => {
        //     if (res) {
        //       this.ShareModeList = res.data;
        //     }
        //   });
        // },
        // 获取列表数据
        // getDataInfo() {
        //   let param = {
        //     code: this.code,
        //   };
        //   getResInfo(param).then((res) => {
        //     if (res.data) {
        //       this.dataInfo = JSON.parse(res.data.vo);
        //       this.infoItemData = JSON.parse(this.dataInfo.attr);
        //       if (this.dataInfo.apis.length == 0) {
        //         //  this.$message.error('缺少参数，请联系管理员');
        //         this.head = [];
        //         this.dataList = [];
        //         this.infoItemDataApi = [];
        //         this.infoItemTableIn = [];
        //         this.infoItemTableOut = [];
        //         return;
        //       } else {
        //         getApiInfo({
        //           apiCode: this.dataInfo.apis[0].code,
        //           resourceCode: this.dataInfo.code,
        //         }).then((ress) => {
        //           this.infoItemDataApi = JSON.parse(ress.data);
        //           this.infoItemTableIn = JSON.parse(
        //             this.infoItemDataApi.inputParameter
        //           );
        //           this.infoItemTableOut = JSON.parse(
        //             this.infoItemDataApi.outputParameter
        //           );
        //         });
        //         getDataPreview({
        //           id: this.dataInfo.apiCode,
        //           resourceCode: this.dataInfo.code,
        //           publish: 1,
        //         }).then((resss) => {
        //           this.head = resss.data.head;
        //           this.dataList = resss.data.data;
        //         });
        //       }
        //     }
        //   });
        // },
        // 格式化数据
        // initInfo(val, type) {
        //   if (val && type === "updateCycle") {
        //     let isHas = this.updateCycleList.find((item) => {
        //       return item.code == val;
        //     });
        //     if (isHas) {
        //       return isHas.name;
        //     }
        //   } else if (val === 0 || (val && type === "shareType")) {
        //     let isHas = this.shareTypeList.find((item) => {
        //       return item.code == val;
        //     });
        //     if (isHas) {
        //       return isHas.name;
        //     }
        //   } else if (val && type === "resourceType") {
        //     let isHas = this.resTypeList.find((item) => {
        //       return item.code == val;
        //     });
        //     if (isHas) {
        //       return isHas.name;
        //     }
        //   } else if (val && type === "ShareMode") {
        //     let arr = val.split(",");
        //     let arrTemp = [];
        //     for (let i = 0; i < arr.length; i++) {
        //       let isHas = this.ShareModeList.find((item) => {
        //         return item.code == arr[i];
        //       });
        //       if (isHas) {
        //         arrTemp.push({
        //           code: isHas.code,
        //           name: isHas.name,
        //           src:
        //             isHas.code == 0
        //               ? sqlImg
        //               : isHas.code == 1
        //               ? fileImg
        //               : isHas.code == 2
        //               ? apiImg
        //               : "",
        //         });
        //       }
        //     }
        //     return arrTemp;
        //   }
        // },
    },
};
</script>

<style scoped>
.t4_qb {
    width: 70px;
    padding: 5px;
    background: #198ef8;
    float: left;
    text-align: center;
    cursor: pointer;
}

.t4_qb a {
    color: #fff;
}

.t4_border {
    border-left: none;
    border-right: none;
}

.t4_sjCons .t2_sjCons_list {
    border-bottom: none;
}

.t4_search ul li:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lTop-box {
    padding: 0 0 15px;
    background-color: #f7f8fa;
}

.lTop-box .proList {
    padding: 15px 30px;
    background-color: #fff;
    border-bottom: 4px solid #198ef8;
    display: flex;
    flex-direction: row;
}

.lTop-box .proList .tit {
    width: 85px;
    padding: 5px 0;
}

.lTop-box .proList ul {
    flex: 1;
    padding: 0;
    margin: 0;
}

.lTop-box .proList ul li {
    float: left;
    text-align: center;
    padding: 5px 10px;
    height: 30px;
    width: 18.5%;
    margin: 0 5px;
    background-color: #f8f8f8;
    cursor: pointer;
}

.lTop-box .proList ul li.proAct {
    background-color: #f1f8ff;
    color: #204dac;
}

.listToggle {
    padding: 13px 20px;
}

.listToggle span {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

#pageDiv {
    text-align: center;
    padding: 20px;
}

#pageDiv /deep/ .el-select__caret {
    width: auto;
    height: auto;
}

#pageDiv /deep/ .el-pagination__jump {
    color: #606266;
    margin: 0;
}

.gxfs img {
    width: 20px;
}

.zyInfoBox {
    display: flex;
    flex-direction: row;
}

.zyInfoBox .zyInfo {
    flex: 1;
    margin-left: 8px;
    font-size: 13px;
}

.zyInfoBox .zyInfo .infoItem_box {
    display: flex;
    flex-direction: row;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem {
    flex: 1;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem>div {
    margin-top: 8px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox,
.el-table .imgBox {
    display: inline-block;
    margin-right: 5px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img.sqlImg,
.el-table .imgBox img.sqlImg {
    width: 18px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img,
.el-table .imgBox img {
    width: 22px;
}

.tabsBox {
    padding: 15px 10px;
}

.tabsBox .topInfo span {
    display: block;
    margin: 8px 15px;
    font-size: 16px;
}

.el-collapse /deep/ .el-collapse-item__header {
    background: #dfdfdf;
    padding-left: 20px;
    font-size: 16px;
}

h2.titBox {
    position: relative;
}

h2.titBox .sqBtn {
    position: absolute;
    right: 0;
    top: 0;
}

.tiaoshi {
    width: 65px;
    height: 32px;
    float: right;
    background: #204dac;
    border-color: #204dac;
    color: #fff;
    border: none;
}

.dialog-bottom {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.zxBtn {
    width: 50px;
    height: 26px;
    background: transparent;
    border-color: #204dac;
    line-height: 1.2;
    float: right;
}

.my-editor {
    background: #f9fafa;
    color: #000;

    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 16px;
    line-height: 1.5;
    padding: 5px;
    font-weight: 500;
}

.my-editor /deep/ .prism-editor__textarea::selection {
    background-color: #cce2ff !important;
    color: #000 !important;
    user-select: none;
}

.my-editor /deep/ .prism-editor__textarea:focus {
    border: 0px solid #007bff;
    outline: none;
}

.my-editor /deep/ .prism-editor__line-numbers {
    padding-right: 10px;
}
</style>
